import { Descriptions, Space, type DescriptionsProps, Image, Flex, Card, Button } from 'antd'
import styles from './index.module.scss'
import { useEffect, useState } from 'react'
import dashboardApi from '@/api/dashboardApi'
import type { ReportData } from '@/types/dashborardType'
import { formatMoney } from '@/utils'
import { useCharts } from '@/hook/useCharts'

const Dashboard = () => {
  const [reportData, setReportData] = useState<ReportData>()
  const [lineRef, lineInstance] = useCharts()
  const [pie1Ref, pie1Instance] = useCharts()
  const [pie2Ref, pie2Instance] = useCharts()
  const [radarRef, radarInstance] = useCharts()

  const getReportData = async () => {
    const res = await dashboardApi.getReportData()
    setReportData(res)
  }
  const items: DescriptionsProps['items'] = [
    {
      key: '1',
      label: '用户ID',
      children: '100016'
    },
    {
      key: '2',
      label: '邮箱',
      children: 'jackma@mars.com'
    },
    {
      key: '3',
      label: '状态',
      children: '在职'
    },
    {
      key: '4',
      label: '手机号',
      children: '18875068467'
    },
    {
      key: '5',
      label: '岗位',
      children: '前端工程师'
    },
    {
      key: '6',
      label: '部门',
      children: '100016'
    }
  ]
  const initLine = async () => {
    const res = await dashboardApi.getLineData()
    const option: echarts.EChartsOption = {
      legend: {
        top: 'top'
      },
      xAxis: {
        type: 'category',
        data: res.label
      },
      yAxis: {
        type: 'value'
      },
      grid: {
        left: '5%',
        right: '5%',
        bottom: '5%'
      },
      tooltip: {},
      series: [
        {
          data: res.order,
          type: 'line',
          name: '订单'
        },
        {
          data: res.money,
          type: 'line',
          name: '流水'
        }
      ]
    }
    lineInstance?.setOption(option)
  }
  const initPie = async () => {
    const res1 = await dashboardApi.getPieCityData()
    const res2 = await dashboardApi.getPieAgeData()
    const option1: echarts.EChartsOption = {
      legend: {
        left: 'left',
        orient: 'vertical',
        top: 'top'
      },
      title: {
        text: '司机城市分布'
      },
      tooltip: {},
      series: [
        {
          name: '司机分布',
          type: 'pie',
          data: res1
        }
      ]
    }
    pie1Instance?.setOption(option1)
    const option2: echarts.EChartsOption = {
      title: {
        text: '司机年龄分布'
      },
      legend: {
        orient: 'vertical',
        top: 'top',
        left: 'left'
      },
      tooltip: {},
      series: [
        {
          name: '年龄分布',
          type: 'pie',
          radius: [20, 140],
          center: ['75%', '50%'],
          roseType: 'area',
          data: res2
        }
      ]
    }
    pie2Instance?.setOption(option2)
  }
  const initRadar = async () => {
    const res = await dashboardApi.getRadarData()
    const option: echarts.EChartsOption = {
      title: {
        text: '司机模型诊断'
      },
      radar: {
        indicator: res.indicator
      },
      tooltip: {},
      series: [
        {
          name: 'Budget vs spending',
          type: 'radar',
          data: res.data
        }
      ]
    }
    radarInstance?.setOption(option)
  }
  useEffect(() => {
    getReportData()
    initLine()
    initPie()
    initRadar()
  }, [lineInstance, pie1Instance, pie2Instance, radarInstance])
  return (
    <div className={styles.dashboard}>
      <Space>
        <Image
          width={80}
          height={80}
          src='https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'
          style={{ borderRadius: '50%' }}
        />
        <Descriptions title='User Info' items={items} />
      </Space>
      <Flex gap='small'>
        <div className={styles.card}>
          <div className='title'>司机数量</div>
          <div className={styles.data}>{formatMoney(reportData?.driverCount)}个</div>
        </div>
        <div className={styles.card}>
          <div className='title'>总流水</div>
          <div className={styles.data}>￥{formatMoney(reportData?.totalMoney)}元</div>
        </div>
        <div className={styles.card}>
          <div className='title'>总订单</div>
          <div className={styles.data}>{formatMoney(reportData?.orderCount)}单</div>
        </div>
        <div className={styles.card}>
          <div className='title'>开通城市</div>
          <div className={styles.data}>{formatMoney(reportData?.cityNum)}座</div>
        </div>
      </Flex>
      <div className={styles.chart}>
        <Card
          title='订单和流水走势图'
          extra={
            <Button type='primary' onClick={initLine}>
              刷新
            </Button>
          }
        >
          <div className={styles.itemLine} ref={lineRef}></div>
        </Card>
      </div>
      <div className={styles.chart}>
        <Card
          extra={
            <Button type='primary' onClick={initPie}>
              刷新
            </Button>
          }
          title='司机分布'
        >
          <div className={styles.pieChart}>
            <div className={styles.itemPie} ref={pie1Ref}></div>
            <div className={styles.itemPie} ref={pie2Ref}></div>
          </div>
        </Card>
      </div>
      <div className={styles.chart}>
        <Card
          extra={
            <Button type='primary' onClick={initRadar}>
              刷新
            </Button>
          }
          title='模型诊断'
        >
          <div className={styles.itemLine} ref={radarRef}></div>
        </Card>
      </div>
    </div>
  )
}

export default Dashboard
